<template>
  <div class="wap-header">
    <div class="back" v-if="backshow" @click="goback"><icon name="el-icon-ArrowLeftBold" :size="16" color="#000" /><b style="font-size: 0.29rem;">返回</b></div>
    <slot></slot>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router';
const router = useRouter()
const props = defineProps({
  backshow:{
    type:Boolean,
    default:true,
  },
  to:{
    type:String,
    default:'',
  }
})
const emits = defineEmits(['close','back'])
const goback = () => {
  if(props.to){
    router.push(props.to)
  }else{
    emits('back')
  }
}

</script>

<style lang="scss" scoped>

.pup-bg{width: 100%; height: 100%; position: fixed; left:0; top:0; background-color: rgba(0,0,0,0.5); z-index: var(--zindex1); display: none;}
.history-box{height: 100%; width: 80%;}
.title{ font-weight: bold; width: 96px; height: 37px; border-radius: 8px 8px 0px 0px; background-color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px;}
.list{
  background-color: #fff; padding: 16px 0; border-radius: 0px 8px 8px 8px; height: calc(100% - 37px);
  .dd{padding: 0 20px;}
  .item{
    height: 47px; display: flex; align-items: center; cursor:pointer; margin-bottom:4px;
    .icon2{display:none}
    &.on,&:hover{
      background-color: var(--el-color-primary-light-9);
      color: var(--el-color-primary);
      .icon1{display:none}
      .icon2{display:block}
      .el-icons{visibility: visible; opacity: 1;}
    }
    .name{max-width:calc(100% - 80px)}
    .el-icons{visibility: hidden; opacity: 0;}
  }
}
.btns{
  display: flex; align-items: center; justify-content: space-between; height: 80px; padding:0 var(--web-pad); border-top: 1px solid #E0E0E0;
  .icon{width: 20px; margin-right: 6px;}
  .btn{height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 4px; border: 1px solid #EBEBEB; width: 48%;}
}
.clear-icon{margin-right: 8px;}
@media only screen and (max-width: 769px){
  .title{height: 60px; width: auto; justify-content: flex-start; padding-left: 0.16rem; border-radius: 0px; border-bottom: none;}
  .list{
    padding: 0 0.2rem; border-radius: 0px; height: calc(100% - var(--headerH) - 1.6rem);
    .dd{
      padding:0 0.1rem;border-radius: 4px;
      .name{margin-left: 0.16rem;}
    }
  }
  .history-box{
    position: fixed; right: 0; top: 0; z-index: var(--zindex3); background-color: #fff; transform: translateX(150%); transition: all ease .3s;
  }
  .show{
    .history-box{transform: translateX(0);}
    .pup-bg{display: block;}
  }
  .btns{
    display: flex; align-items: center; justify-content: space-between; height: 1.6rem; padding:0 0.2rem 0.4rem; 
    .icon{width: 0.38rem;}
    .btn{height: 0.68rem; display: flex; align-items: center; justify-content: center; border-radius: 0.4rem; border: 1px solid #EBEBEB; width: 48%;}
  }
}

</style>